

<template>
  <block>
    <van-field
      :value="form[name]"
      :required="!norequired" 
      clickable
      :label="label"
      :placeholder="placeholder"
      readonly
      is-link
      @click-input="disabled ? ()=>{} : showPicker = true"
      :disabled="disabled"
    ></van-field>
    <van-popup :show="showPicker" position="bottom" :height="height">
      <van-picker
        show-toolbar
        :columns="columns"
        :value-key="valueKey"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      >
      </van-picker>
    </van-popup>
  </block>
</template>


<script>
export default {
  data() {
    return {
      showPicker: false,
    };
  },
  props: {
    disabled:Boolean,
    labelkey:String,
    form: Object,  // 需要修改的数据  很重要 
    label: String,
    icon: String,
    placeholder: String,
    name: String,  // key 很重要 
    columns: Array, // 下拉列表的数据 很重要 
    norequired:Boolean,  // 默认是false 不影响其他的 这个
    valueKey:[Array,String],
    height: {
      type: String,
      default: "40%",
    },
  },
  // 不是input 框输入操作 不能用 v-model 
  // model:{
  //     prop:'value',
  //     event:"click-input",
  // },
  methods: {
    onConfirm(e) {
      const { picker, value, index } = e.detail;


      this.$emit("click-input", this.name, value);
      this.showPicker = false;
    },
  },
};
</script>

<style>
</style>